<template>
  <div class="app-container">
    <div class="manage-header">
      <el-form :inline="true" :model="queryParams" ref="queryForm" label-width="100" @submit.native.prevent>

        <el-form-item v-if="searchFormData.length!=0 && searchFormData[0].status === '1'" :key="searchFormData[0].prop" :label="searchFormData[0].name">
          <el-input size="small" v-model="queryParams[searchFormData[0].prop]" :placeholder="'请输入' + searchFormData[0].name"></el-input>
        </el-form-item>

        <el-form-item  v-if="searchFormData.length!=0">
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button type="info" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          <el-button v-if="searchFormData.length>1" icon="el-icon-arrow-down" size="mini" id="more-attr" @click="moreattr">更多属性</el-button>
        </el-form-item>

        <div id="more-list" style="display: none;">
          <el-form-item v-for="item in searchFormData.slice(1)" :key="item.prop" :label="item.name" v-if="item.status === '1'">
            <!--根据type来显示是什么标签-->
            <el-select v-model="queryParams[item.prop]" placeholder="请选择" v-if="item.componentType === 'el-select'">
              <el-option v-for="item in item.optionValue" :key="item.value" :label="item.label" :value="item.value"
              ></el-option>
            </el-select>

            <el-date-picker v-model="queryParams[item.prop]" size="small" style="width: 240px" value-format="yyyy-MM-dd"
                            type="daterange"
                            range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
                            v-if="item.componentType === 'el-date-picker'"
            ></el-date-picker>

            <el-input size="small" v-model="queryParams[item.prop]" :placeholder="'请输入' + item.name" v-else></el-input>
          </el-form-item>
        </div>
      </el-form>
    </div>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <template v-for="(btn, key) in operates.list">
          <el-button
            v-if="btn.status==='1' && btn.location==='2'"
            :type="btn.styleType"
            :icon="btn.icon"
            size="mini"
            @click="clickEvent(btn.type,btn.url)"
            v-hasPermi="['pms:type:add']"
          >{{ btn.name }}
          </el-button>
        </template>
      </el-col>
      <el-popover title="列筛选" trigger="click" style="float: right;margin-right: 10px;">
        <el-checkbox-group v-model="checkedColumns" size="mini">
          <el-checkbox style="display: block;" v-for="(item,index) in tableData" :key="item.name" :label="item.name"
                       @change="chickBoxGroupChange(item)"
          >{{ item.name }}
          </el-checkbox>
        </el-checkbox-group>
        <el-button size="small" slot="reference"><i class="el-icon-arrow-down el-icon-menu"></i></el-button>
      </el-popover>
    </el-row>

    <!--数据-->
    <dynamic-table :list="list" @handleSelectionChange="handleSelectionChange" :options="options"
                  :columns="tableData" :operates="operates">
    </dynamic-table>
    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
                @pagination="getList"/>
  </div>
</template>

<script>
// import dynamicSearchForm from '@/views/components/dynamicSearchForm'
import dynamicTable from '@/views/components/dynamicTable'
import { getDataList,getData,addData,updateData,delData } from "@/api/dynamic/dynamicApi";
import { getConfigInfo } from "@/api/dynamic/dynamic";

export default {
  components: {
    dynamicTable
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 总条数
      total: 0,
      // 文档表格数据
      list: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      options: {// table 的参数
        stripe: true, // 是否为斑马纹 table
        loading: false, // 是否添加表格loading加载动画
        highlightCurrentRow: true, // 是否支持当前行高亮显示
        mutiSelect: true // 是否支持列表项选中功能
      },
      path: '',
      configName:'',
      params:[],
      commandId:'',
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      searchFormData: [],
      checkedColumns: [],
      tableData: [],
      operates: {// 列操作按钮
        width: 150,
        list: []
      },
      queryConfigParams:{}
    };
  },
  created() {
    this.path = this.$route.path.split("？")[0];
    var str=this.$route.path.split("？");
    if(str.length>1){
      var paramsStr=str[1].split("=");
      this.queryParams[paramsStr[0]]=paramsStr[1];
      this.params=paramsStr;
    }
    //let pageParams = this.params?this.params:eval ("(" + this.$route.meta.pageParams + ")");
    // let pageParams =eval ("(" + this.$route.meta.pageParams + ")");
    let pageParams =JSON.parse (this.$route.meta.pageParams.replace(/'/g,'"'));
    if(pageParams){
      this.queryConfigParams.table=pageParams.table;
      this.queryConfigParams.searchForm=pageParams.searchForm;
      this.queryConfigParams.command=pageParams.command;
      this.queryConfigParams.toolbar=pageParams.toolbar;
      this.queryConfigParams.treeMenu=pageParams.treeMenu;
    }else{
      this.msgError("缺少参数");
      return false;
    }
    this.queryParams.end=this.queryParams.begin*this.queryParams.pageSize
    this.getConfig();
    this.getList();
  },
  methods: {
    //更多属性
    moreattr() {
      var div=document.getElementById("more-list");
      if(div.style.display === 'none'){
        div.style.display='block';
        document.getElementById("more-attr").setAttribute('icon','el-icon-arrow-up')
      }else{
        div.style.display='none';
        document.getElementById("more-attr").setAttribute('icon','el-icon-arrow-down')
      }
    },
    //查询按钮
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    //重置
    resetQuery() {
      this.queryParams={
        pageNum: 1,
        pageSize: 10,
      }
      this.handleQuery();
    },
    /** 获取配置信息 */
    getConfig() {
      this.loading = true;
      getConfigInfo(this.queryConfigParams).then(response => {
        this.tableData = response.data.tableData;
        this.searchFormData = response.data.searchFormData;
        this.operates.list = response.data.commandData;
        this.tableData.forEach((item, index) => {
          this.checkedColumns.push(item.name)
        });
        this.loading = false;
      })
    },
    /** 查询列表数据 */
    getList() {
      this.loading = true;
      this.queryParams.begin=(this.queryParams.pageNum-1)*this.queryParams.pageSize+1;
      this.queryParams.end=this.queryParams.pageNum*this.queryParams.pageSize;
      getDataList(this.path,this.queryParams).then(response => {
        this.list = response.data;
        this.total = response.total;
        this.loading = false;
      });
    },
    //搜索
    postData(val){
      this.queryParams={
        begin: 1,
        pageSize: 10,
        end:this.queryParams.begin*this.queryParams.pageSize
      }
      if(this.params.length>1){
        this.queryParams[this.params[0]]=this.params[1];
      }
      var keys=Object.keys(val)
      for(var i=0;i<keys.length;i++){
        this.queryParams[keys[i]]=val[keys[i]]
      }
      this.getList();
    },
    //控制列显示
    chickBoxGroupChange(item) {
      item.show = !item.show
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length != 1
      this.multiple = !selection.length
    },
    // 按钮点击事件
    clickEvent(type,url){
      if(type==='2'){
        this.$router.push({path: url});
      }else{
      }
    },
    /** 新增按钮操作 */
    handleAdd() {
      //this.$router.push({path: '/doc/create'});
    },
    /** 修改按钮操作 */
    handleUpdate(row){
      this.reset();
      const id = row.id || this.ids
      // getData(id).then(response => {
      // this.form = response.data;
      // this.open = true;
      // this.title = "修改";
      // });
    },
    // 导出
    handleExport(){

    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$confirm('是否确认删除编号为"' + ids + '"的数据项?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function() {
        return delData(ids);
      }).then(() => {
        this.getList();
        this.msgSuccess("删除成功");
      }).catch(function() {});
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 状态翻译
    statusFormat(row, column) {
      if (row.status == 1) {
        return "正常";
      }else{
        return "禁用";
      }
    }
  }
};
</script>
<style>
#more-list{
  background-color: rgb(220, 223, 230);
  padding: 10px;
}
</style>
